{% block sw_confirm_field %}
<div
    class="sw-confirm-field"
    :class="confirmFieldClasses"
>
    {% block sw_confirm_field_input_field %}

    <mt-text-field
        v-model="draft"
        v-bind="$attrs"
        :required="required"
        :disabled="disabled"
        :error="error"
        validation="required"
        @focus="onStartEditing"
        @blur="onBlurField"
        @keyup.enter="onSubmitFromKey"
        @keyup.esc="onCancelFromKey"
        @update:model-value="onInput"
    />
    {% endblock %}

    {% block sw_confirm_field_button_list %}
    <span
        v-show="isEditing"
        class="sw-confirm-field__button-list"
    >
        {% block sw_confirm_field_cancel_button %}
        <mt-button
            :disabled="disabled"
            class="sw-confirm-field__button sw-confirm-field__button--cancel"
            square
            size="x-small"
            tabindex="-1"
            variant="secondary"
            @click="onCancelSubmit"
        >

            {% block sw_field_inline_cancel_submit_button_icon %}
            <mt-icon
                size="10px"
                name="regular-times-xs"
            />
            {% endblock %}
        </mt-button>
        {% endblock %}

        {% block sw_confirm_field_confirm_button %}
        <mt-button
            class="sw-confirm-field__button sw-confirm-field__button--submit"
            :disabled="preventEmptySubmit && !draft || disabled"
            square
            size="x-small"
            variant="primary"
            tabindex="-1"
            @click="onSubmitValue"
        >

            {% block sw_field_inline_submit_button_icon %}
            <mt-icon
                size="10px"
                name="regular-checkmark-xxs"
            />
            {% endblock %}
        </mt-button>
        {% endblock %}
    </span>
    {% endblock %}
</div>
{% endblock %}
